<%@page contentType="text/html;charset=UTF-8"%>
<%@ page import="whf.framework.web.Constants"%>
<%@ page import="whf.framework.security.entity.User"%>

<%@taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/tlds/framework.tld" prefix="framework"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><framework:attr source="STRUTS-META" attr="name" /></title>
<jsp:include page="/common/inc/select.jsp" />
</head>
<%
java.util.List<User> selectedUsers = (java.util.List<User>)request.getAttribute("selectedUsers");
java.util.List<User> availableUsers = (java.util.List<User>)request.getAttribute("availableUsers");
 %>
<body>
<framework:msg />
<html:form action='<%=  (String)request.getAttribute(Constants.STRUTS_PATH) %>' method="post" onsubmit="return form_submit()">
<html:hidden property="webMethod" value="manageUsers" />
<framework:ext />

<table width="80%" align='center'>
	<tr height=20 valign='bottom'>
		<td width="10%">名称</td>
		<td colspan=4><framework:attr source="selectedRole" attr="name" /></td>
	</tr>
	<tr height=30 valign='top'>
		<td width="10%">说明</td>
		<td colspan=4><framework:attr source="selectedRole" attr="remarks" /></td>
	</tr>
	<tr height="2px" bgcolor="#DFDFDF">
		<td colspan="5"></td>
	</tr>
	<tr>
		<td width="10%"></td>
		<td width="35%">所有用户</td>
		<td width="10%"></td>
		<td width="35%">选中用户</td>
		<td width="10%"></td>
	</tr>
	<tr>
		<td></td>
		<td>
			<select multiple name="availableUsers" id="availableUsers" size="20" style="width: 260px">
				<% for(User user: availableUsers){ 
					pageContext.setAttribute("user", user);
				%>
				<option value='<framework:attr source="user" attr="id" />'><framework:attr source="user" attr="displayName" /></option>
				<% } %>
			</select>
		</td>
		<td>
			<table width="100%" height="80%" valign="middle" align='center'>
				<tr>
					<td><input type='button' style="width:30px" value='&gt;' onclick='addItems()'></td>
				</tr>
				<tr>
					<td><input type='button' style="width:30px" value='&gt;&gt;' onclick='addAllItems()'></td>
				</tr>
				<tr>
					<td><input type='button' style="width:30px" value='&lt;' onclick='removeItems()'></td>
				</tr>
				<tr>
					<td><input type='button' style="width:30px" value='&lt;&lt;' onclick='removeAllItems()'></td>
				</tr>
			</table>
		</td>
		<td>
			<select multiple name="selectedUsers" id="selectedUsers" size="20" style="width: 260px">
				<% for(User user: selectedUsers){ 
					pageContext.setAttribute("user", user);
				%>
				<option value='<framework:attr source="user" attr="id" />'><framework:attr source="user" attr="displayName" /></option>
				<% } %>
			</select>
		</td>
		<td></td>
	</tr>
	<tr height="30px" valign='bottom'>
		<td colspan=4 align='center'>
			<html:submit><framework:attr source="i18n" attr="form.submit" /></html:submit>
			<html:reset><bean:message key="form.reset" /></html:reset>
		</td>
	</tr>
</table>
</html:form>

</body>
<script language="javascript">
function addItems(){
	moveOptions(document.getElementById("availableUsers"),
		document.getElementById("selectedUsers"),
		false);
}
function addAllItems(){
	moveOptions(document.getElementById("availableUsers"),
		document.getElementById("selectedUsers"),
		true);
}
function removeItems(){
	moveOptions(document.getElementById("selectedUsers"),
		document.getElementById("availableUsers"),
		false);
}
function removeAllItems(){
	moveOptions(document.getElementById("selectedUsers"),
		document.getElementById("availableUsers"),
		true);
}
//
function moveOptions(from, to, moveAll){
	var fromOptions = from.options;
	for(var i=fromOptions.length - 1; i>= 0; i--){
		if(!moveAll && !fromOptions[i].selected) continue;

		var text = fromOptions[i].text;
		var value = fromOptions[i].value;
		var ele = document.createElement("option");
		to.options.add(ele);
		ele.text = text;
		ele.value = value;

		fromOptions.remove(i);
	}
}
function form_submit(){
	var selectedUsers = document.getElementById("selectedUsers");
	for(var i=0; i< selectedUsers.length; i++){
		selectedUsers[i].selected = true;
	}
	var availableUsers = document.getElementById("availableUsers");
	for(var i=0; i< availableUsers.length; i++){
		availableUsers[i].selected = true;
	}
	return true;
}
</script>
</html> 